<template>
	<view class="page">
		<view class="index_bg_wrap" >
			<view class="topc" @click="gonglu(e)">
			</view>
			<image class="index_bg" src="/static/cff0565216bd4e7a633c51848dcd1cb.png" mode="widthFix"></image>
			<!-- <image class="rank-icon" src="/static/rank-icon.png" mode="aspectFill"></image> -->
		

			<view class="btn_wrap" v-if="info">
				<button class="btn_stones">
					<view class="btn_stones_text">
						<image src="/static/ic_ape_stone.png" mode="aspectFill" class="stone_icon"></image>
						<text>{{info.num_his}}</text>
					</view>
					<view class="btn_stones_tips">我的矿石</view>
				</button>
				<view class="btn_tips">雇佣蚂蚁可开启挖矿</view>
			</view>
		</view>

		<view class="tabs">
			<view @click="tabChange(index)" v-for="(item, index) in tabList" :key="index" class="tab" :class="{ active: tabIndex === index }">
				{{ item }}
			</view>
		</view>

		<view class="panel-wrap" v-if="info">
			<view class="panel-total">
				<view class="panel-total-em" >
					<image class="panel-total-img" src="/static/my/49856aeb67efef2406fa0a8a55c742a.png" mode="aspectFill"></image>
					<view class="total-em-content">
						<view class="num">{{info.haoyou}}</view>
						<view class="label">我的好友</view>
					</view>
				</view>
				<view class="panel-total-em">
					<image class="panel-total-img" style="width: 108rpx;" src="/static/my/71bf6a61309f154b8ddcdb3da2daf84.png" mode="aspectFill"></image>
					<view class="total-em-content">
						<view class="num">{{info.mayi}}</view>
						<view class="label">我的蚂蚁</view>
					</view>
				</view>
			</view>

			<view class="level-wrap">
				<view class="level-top">
					<view class="level-title">
						<text v-if="tabIndex==0">
							初阶挖矿
						</text>
						
						<text  v-if="tabIndex==1">
							进阶挖矿
						</text>
						<text  v-if="tabIndex==2">
							高阶挖矿
						</text>
					</view>
					
					
			<!-- 		<button class="level-btn">
						<text v-if="tabIndex==0">初阶介绍</text>
						<text v-if="tabIndex==1">进阶介绍</text>
						<text v-if="tabIndex==2">高阶介绍</text>
						
						<image src="/static/arrowright.png" class="arrow"></image>
					</button> -->
				</view>
				<view class="level-img-wrap" v-if="tabIndex==0">
					<image class="level-img" src="/static/bg_pit_sands_stone_1.png" mode="aspectFill"></image>
					<!-- <view class="level-img-text">升级进度0.0%</view> -->
					<view class="mayi_arr" v-if="info.a1 && info.a1==1">
						<image  src="../../static/my.gif" mode=""></image>
						<transition name="fade">
							<view v-show="xianshi" style="width: 100px;font-size: 22rpx;color: #fff;position: absolute;top:-30rpx">
								+0.0000116
							</view>
						</transition>
						
					</view>
				</view>
				
				
				<view class="level-img-wrap" v-if="tabIndex==1">
					<image class="level-img" src="/static/bg_pit_sands_stone_1.png" mode="aspectFill"></image>
					<!-- <view class="level-img-text">升级进度0.0%</view> -->
					<view class="mayi_arr" v-if="info.a2 && info.a2==1">
						<image  src="../../static/my.gif" mode=""></image>
						<transition name="fade">
							<view v-show="xianshi" style="width: 100px;font-size: 22rpx;color: #fff;position: absolute;top:-30rpx">
								+0.0000232
							</view>
						</transition>
					</view>
				</view>
				
				
				<view class="level-img-wrap" v-if="tabIndex==2">
					<image class="level-img" src="/static/bg_pit_sands_stone_1.png" mode="aspectFill"></image>
					<!-- <view class="level-img-text">升级进度0.0%</view> -->
					<view class="mayi_arr" v-if="info.a3 && info.a3==1">
						<image  src="../../static/my.gif" mode=""></image>
						<transition name="fade">
							<view v-show="xianshi" style="width: 100px;font-size: 22rpx;color: #fff;position: absolute;top:-30rpx">
								+0.0000348
							</view>
						</transition>
					</view>
				</view>
				
				

				<view style="position: relative;top:-140rpx;height:160rpx;width: 100%;margin-top: 20px;background: #393d48;">
					<view class="level-bottom">
						<text class="level-bottom-left">
							蚂蚁到计时：
							<view v-show="tabIndex==0" style="float: right;">
								<wly-countdown :day="d" :hour="h" :minute="i" :second="s" showType="slot">
								    <template v-slot="{day, hour, minute, second}">
								        <text>{{day}}天</text>
								        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
								    </template>
								</wly-countdown>
							</view>
						
							<view v-show="tabIndex==1" style="float: right;">
								<wly-countdown :day="d1" :hour="h1" :minute="i1" :second="s" showType="slot">
								    <template v-slot="{day, hour, minute, second}">
								        <text>{{day}}天</text>
								        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
								    </template>
								</wly-countdown>
							</view>
							
							<view v-show="tabIndex==2" style="float: right;">
								<wly-countdown :day="d2" :hour="h2" :minute="i2" :second="s" showType="slot">
								    <template v-slot="{day, hour, minute, second}">
								        <text>{{day}}天</text>
								        <text class="time" v-if="day||hour||minute||second">{{hour}}:{{minute}}:{{second}}</text>
								    </template>
								</wly-countdown>
							</view>
							
						</text>
						<view class="level-bottom-right">
							<image src="/static/ic_ape_stone.png" mode="aspectFill" class="level-bottom-icon"></image>
							<text>{{tabIndex+1}}/天</text>
						</view>
					</view>
					
					
					<view @click="openPopup" class="level-buy">
						<image class="level-buy-img" src="/static/bg_btn_nx_friend_work.png" mode="aspectFill"></image>
						<view class="level-buy-text" v-if="tabIndex==0">雇佣初阶矿工</view>
						<view class="level-buy-text" v-if="tabIndex==1">雇佣进阶矿工</view>
						<view class="level-buy-text" v-if="tabIndex==2">雇佣高阶矿工</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar  v-if="lang==0" :current="1"></tabbar>
		<tabbareng v-if="lang==1" :current="1"></tabbareng>

		<fui-bottom-popup @close="popupClose" :show="popupShow" background="transparent">
			<view class="popup-container">
				<image @click="popupClose" class="popup_close" src="/static/ic_big_close.png" mode="aspectFill"></image>
				<image class="popup_bg" src="/static/ic_top_buy_card.png" mode="aspectFill"></image>
				<!-- <image class="tips_img" src="/static/tips_img.png" mode="aspectFill"></image> -->

				<!-- <image class="product_img" src="/static/ic_ape_product_img.png" mode="aspectFill"></image> -->

				<view class="popup_title">
					<view class="title">
						<text v-if="tabIndex==0">初阶蚂蚁旷工</text>
						<text v-if="tabIndex==1">进阶蚂蚁旷工</text>
						<text v-if="tabIndex==2">高阶蚂蚁旷工</text>
						
					</view>
					<view class="subtitle">请选择雇佣天数</view>
				</view>

				<view class="popup_list">
					<view class="popup_item" :class="tian==0?'tian':''" @click="tians(0)">
						<image class="popup_item_img" src="/static/my/f1.jpg" mode="aspectFill"></image>
						<view class="pupup_desc">
							<view class="pupup_desc_name"  style="text-align: center;">7</view>
							<view class="pupup_desc_num">
								天</view>
						</view>
					</view>
					
					<view class="popup_item" :class="tian==1?'tian':''"  @click="tians(1)">
						<image class="popup_item_img" src="/static/my/f2.jpg" mode="aspectFill"></image>
						<view class="pupup_desc">
							<view class="pupup_desc_name" style="text-align: center;">15</view>
							<view class="pupup_desc_num">天</view>
						</view>
					</view>
					
					<view class="popup_item" :class="tian==2?'tian':''"  @click="tians(2)">
						<image class="popup_item_img" src="/static/my/f3.jpg" mode="aspectFill"></image>
						<view class="pupup_desc">
							<view class="pupup_desc_name"  style="text-align: center;">30</view>
							<view class="pupup_desc_num">天</view>
						</view>
					</view>
					
				</view>

				<view class="popup_block"></view>
<!-- 
				<view class="popup_input_wrap">
					<view @click="minusHandle" class="reduce">
						<image src="/static/minus.png" class="math-icon"></image>
					</view>
					<input @input="inputChange" v-model="num" class="popup_input" type="number" />
					<view @click="addHandle" class="add">
						<image src="/static/plus.png" class="math-icon"></image>
					</view>
				</view> -->

				<view class="popup_tips">
					<text>预计每天可挖出</text>
					<image src="/static/ic_ape_stone.png" class="tips_icon"></image>
					<text v-if="tabIndex==0">预计每天可挖出1颗矿石</text>
					<text  v-if="tabIndex==1">预计每天可挖出2颗矿石</text>
					<text  v-if="tabIndex==2">预计每天可挖出3颗矿石</text>
					
					<!-- <text class="gray">（具体获得数值以实际为准）</text> -->
				</view>

				<view class="popup_btn_wrap">
					<view class="popup_btn"  @click="payss()">
						<view class="popup_btn_top">立即雇佣</view>
						<!-- <view class="popup_btn_bottom">限购5张，5张包邮</view> -->
					</view>
				</view>
			</view>
		</fui-bottom-popup>
		

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: ['初阶矿山', '进阶矿山', '高阶矿山'],
				tabIndex: 0,
				popupShow: false,
				num: 5,
				info:null,
				d:0,
				h:0,
				i:0,
				s:0,
				d1:0,
				h1:0,
				i1:0,
				s1:0,
				d2:0,
				h2:0,
				i2:0,
				s2:0,
				i2:0,
				xianshi:false,
				tian:0,
				time_m:null,
				chan:0,
				lang:0,
			};
		},
		onShow() {
			this.get_info();
			if(this.time_m){
				clearInterval(this.time_m)
			}
			this.renwu();
		},
		
		methods: {
			renwu(){
				if(this.time_m){
					clearInterval(this.time_m)
				}
				let that = this;
				this.time_m = setInterval(function(){
					that.xianshi = !that.xianshi
					let s = that.chan * 0.0000116;
								
					
					that.info.num_his = (that.info.num_his*1 + s).toFixed(6)
				
					
				},1000)
			},
			tians(type){
				console.log(type,777777777);
				
				this.tian = type
			},
			payss(){
				
				
				let platform = uni.getSystemInfoSync().platform;
				if(platform === 'ios'){
					uni.showLoading({ title: '正在加载', mask: true });
					var _this = this;
					_this.$api.request('/api/user/wxppaysss', {
						tian:this.tian,
						level:this.tabIndex,
						
					}, uni.getStorageSync('token'), function(res) {
						console.log(res,888888);
						uni.hideLoading();
						if (res.code == 1) {
							console.log(res.data,7777777)
							uni.requestPayment({
							    "provider": "wxpay", 
							    "orderInfo": res.data,
							    success(res) {
									_this.popupClose();	
									uni.showToast({
										title: '支付完成',
										icon: 'none'
									});
									setTimeout(function(){
										_this.get_info();
										//支付完成
										if(_this.time_m){
											clearInterval(_this.time_m)
										}
										_this.renwu();
									},1000)
									
								},
							    fail(e) {}
							})
						}
					});
					
				}else if(platform === 'android'){
					uni.showLoading({ title: '正在加载', mask: true });
					var _this = this;
					_this.$api.request('/api/user/wxppaysss', {
						tian:this.tian,
						level:this.tabIndex,
						
					}, uni.getStorageSync('token'), function(res) {
						console.log(res,888888);
						uni.hideLoading();
						if (res.code == 1) {
							console.log(res.data,7777777)
							uni.requestPayment({
							    "provider": "wxpay", 
							    "orderInfo": res.data,
							    success(res) {
									_this.popupClose();	
									uni.showToast({
										title: '支付完成',
										icon: 'none'
									});
									setTimeout(function(){
										_this.get_info();
										//支付完成
										if(_this.time_m){
											clearInterval(_this.time_m)
										}
										_this.renwu();
									},1000)
									
								},
							    fail(e) {}
							})
						}
					});
					
				}else{
					uni.showLoading({ title: '正在加载', mask: true });
					let that = this;
					uni.login({
						provider: 'weixin',
						success: function (loginRes) {
							// 登录成功
							that.$api.request('/api/user/wxppay4', {
								tian:that.tian,
								level:that.tabIndex,
								code:loginRes.code,
							},
							 '', function(res){
								console.log(res);
									
								if(res.code == 1) {
										uni.hideLoading();
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: String(res.data.timeStamp),
										nonceStr: String(res.data.nonceStr),
										package:String( res.data.package),
										signType: 'MD5',
										paySign: String(res.data.paySign),
										success:  (res)=> {
											that.popupClose();
											uni.showToast({
												title: '支付完成',
												icon: 'none'
											});
											setTimeout(function(){
												that.get_info();
												//支付完成
												if(that.time_m){
													clearInterval(that.time_m)
												}
												that.renwu();
											},1000)
										},
										fail: function (err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
									
								
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						},
						fail: function (err) {
							// 登录授权失败  
							// err.code是错误码
						}
					});
				}
				
				
				
			},
			get_info(){
				uni.showLoading({ title: '正在加载', mask: true });
				var _this = this;
				_this.$api.request('/api/user/getkuang', {}, uni.getStorageSync('token'), function(res) {
					uni.hideLoading();
					if (res.code == 1) {
						_this.info = res.data;
						_this.chan = res.data.chan
			
						if(res.data.list[0]){
							_this.shijian(res.data.list[0].endtime)
							_this.shijian1(res.data.list[1].endtime)
							_this.shijian2(res.data.list[2].endtime)
							
						}
					}
				});
			},
			shijian(str){
				this.d = parseInt(str/86400);
				this.h = (str - this.d*86400)/3600
				this.i = (str - this.d*86400 - this.h*3600)/60
				this.s == str - this.d*86400 - this.h*3600 - this.i*60
	
				
			},
			shijian1(str){
				this.d1 = parseInt(str/86400);
				this.h1 = (str - this.d1*86400)/3600
				this.i1 = (str - this.d1*86400 - this.h1*3600)/60
				this.s1 == str - this.d1*86400 - this.h1*3600 - this.i1*60
			},
			shijian2(str){
				this.d2 = parseInt(str/86400);
				this.h2 = (str - this.d2*86400)/3600
				this.i2 = (str - this.d2*86400 - this.h2*3600)/60
				this.s2 == str - this.d2*86400 - this.h2*3600 - this.i2*60
			},
			gonglu(){
				uni.navigateTo({ url: "/pages/index/gonglue"});
			},
			// tab切换
			tabChange(index) {
			
				this.tabIndex = index;
			
				// if(this.info.list[index]){
				
				// 	this.shijian(this.info.list[index].endtime)
				// }
			},

			// 数量减少
			minusHandle() {
				if (this.num <= 1) {
					return uni.showToast({
						title: '数量最小1',
						icon: 'none'
					});
				}
				this.num -= 1;
			},

			// 数量增加
			addHandle() {
				if(this.num>=5) {
					return uni.showToast({
						title: '数量最大5',
						icon: 'none'
					});
				}
				this.num += 1;
			},
			wx_pay(){
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						// 登录成功
						that.$api.request('/api/user/wxppay3', {tian:that.money,code:loginRes.code},
						 '', function(res){
							console.log(res);
								
							if(res.code == 1) {
									console.log(res.data,77777777);
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: String(res.data.timeStamp),
									nonceStr: String(res.data.nonceStr),
									package:String( res.data.package),
									signType: 'MD5',
									paySign: String(res.data.paySign),
									success:  (res)=> {
											this.$refs.popup.close()
											uni.switchTab({
											   url: '../index/index'
											});
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
								
							
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						});
					},
					fail: function (err) {
						// 登录授权失败  
						// err.code是错误码
					}
				});
			},
			// 输入事件
			inputChange(e) {
				let value = e.detail.value + '';
				value = value.replace(/^\./g, ''); //  不能以“.”开头
				value = value.replace(/[^\d]/g, ''); //清除“数字”以外的字符
				value = value.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				if (value.indexOf('.') < 0 && value != '') {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					value = parseFloat(value);
				}
				if(value>5) {
					value = 5;
				}
				setTimeout(() => {
					this.num = value;
				}, 0);
			},

			// 打开购买弹窗
			openPopup() {
				this.popupShow = true;
			},

			// 关闭购买弹窗
			popupClose() {
				this.popupShow = false;
				this.num = 5;
			}
		}
	};
</script>
<style lang="scss">
	.page {
		min-height: 100vh;
		background: rgba(0, 0, 0, 0.97);
	}
	.tian{
		background: #f2e1e5 !important;
	}
	.index_bg_wrap {
		
		padding: 64rpx 0;
		position: relative;
		.topc{
			position: relative;
			top:330rpx;
			height: 70rpx;
			width: 180rpx;
			z-index: 9;
			margin-left: 39%;
		}

		.rank-icon {
			position: absolute;
			top: 32rpx;
			right: 32rpx;
			width: 64rpx;
			height: 64rpx;
		}

		.index_bg {
			width: 100%;
			height: 371px;
		}
	}
	
	.btn_wrap {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 32rpx;

		.btn_stones {
			background: url(/static/ic_ape_index_myrocks.png);
			background-size: 100%;
			height: 155rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
	
		}

		.btn_stones_text {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 48rpx;
			font-weight: bold;
			line-height: 1;
		}

		.btn_stones_tips {
			color: rgba(255, 255, 255, 0.3);
			font-size: 28rpx;
			padding: 8rpx 0;
			line-height: 1;
		}

		.stone_icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 32rpx;
		}

		.btn_tips {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.3);
			padding: 32rpx 0;
		}
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tab {
			color: rgba(255, 255, 255, 0.3);
			background: #1c1f28;
			padding: 32rpx;
			width: 32%;
			box-sizing: border-box;
			border-radius: 16rpx 16rpx 0 0;
			display: flex;
			justify-content: center;

			&.active {
				color: #fff;
				background: #393d48;
			}
		}
	}

	.panel-wrap {
		background: #393d48;

		.panel-total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
		}

		.panel-total-img {
			width: 128rpx;
			height: 128rpx;
			position: relative;
			right: 10px;
		}

		.panel-total-em {
			position: relative;
			width: 320rpx;
			height: 128rpx;
			background: #1c1f28;
			border-radius: 0.5em;
			.total-em-content {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 150rpx;
				color: #fff;
			}

			.num {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 1;
			}

			.label {
				font-size: 22rpx;
			}
		}
	}

	.level-wrap {
		.level-top {
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;
			margin: 0 32rpx;
		}

		.level-title {
			color: #fff;
			font-weight: bold;
			flex: 1;
		}

		.level-btn {
			display: flex;
			align-items: center;
			line-height: 1;
			margin: 0;
			font-size: 24rpx;
			background: transparent;
			border: 1px solid rgba(255, 255, 255, 0.3);
			padding: 8rpx 16rpx;
			color: rgba(255, 255, 255, 0.3);
		}

		.arrow {
			width: 24rpx;
			height: 24rpx;
		}

		.level-img-wrap {
			position: relative;
			.mayi_arr{
				position: absolute;
				top: 180rpx;
				left:180rpx;
				image{
					width: 60rpx;
					height: 60rpx;
					left: 30rpx;
					// transform: rotate(31deg);
				}
			}
		}

		.level-img {
			width: 750rpx;
			height: 360rpx;
		}
		.level-img-text {
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.3);
			position: absolute;
			left: 22rpx;
			bottom: 86rpx;
		}

		.level-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 32rpx;

			.level-bottom-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			.level-bottom-left {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.5);
			}

			.level-bottom-right {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.5);
				display: flex;
				align-items: center;
			}
		}

		.level-buy {
			position: relative;
			padding: 32rpx;
			display: flex;
			align-items: center;
			top:-30rpx;		
			.level-buy-img {
				height: 98rpx;
				width: 100%;
			}

			.level-buy-text {
				font-size: 36rpx;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.popup-container {
		position: relative;
		padding-bottom: 100rpx;
		padding-top: 60rpx;

		.popup_bg {
			width: 750rpx;
			height: 202rpx;
			vertical-align: middle;
		}
		
		.tips_img {
			width: 166rpx;
			height: 108rpx;
			position: absolute;
			top: 0rpx;
			left: 120rpx;
			z-index: 10;
		}

		.popup_close {
			position: absolute;
			top: 100rpx;
			right: 20rpx;
			width: 60rpx;
			height: 60rpx;
			z-index: 9;
		}

		.product_img {
			position: absolute;
			left: 32rpx;
			top: 0rpx;
			width: 200rpx;
			height: 260rpx;
			z-index: 9;
		}

		.popup_title {
			position: absolute;
			top: 110rpx;
			left: 250rpx;
			z-index: 9;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 42rpx;
				font-weight: bold;
			}

			.subtitle {
				font-size: 28rpx;
				background: #d1d1d1;
				padding: 4rpx 16rpx;
				border-radius: 10rpx;
				margin-top: 8rpx;
			}
		}

		.popup_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			background: #f8f8f8;

			.popup_item {
				background: #fff;
				width: 210rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 12rpx 16rpx;
				box-sizing: border-box;
			}
			.popup_item_img {
				
				width: 100rpx;
				height: 130rpx;
				margin-right: 16rpx;
				box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, .5);
			}

			.pupup_desc_name {
				font-size: 28rpx;
				font-weight: bold;
			}

			.pupup_desc_num {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.popup_block {
			width: 100%;
			height: 32rpx;
			background: #f8f8f8;
		}

		.popup_input_wrap {
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;
			padding: 32rpx 128rpx;
			box-sizing: border-box;

			.reduce,
			.add {
				border: 3rpx solid #eee;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 6rpx;
			}

			.math-icon {
				width: 32rpx;
				height: 32rpx;
			}

			.popup_input {
				flex: 1;
				text-align: center;
				height: 80rpx;
				font-weight: bold;
				font-size: 40rpx;
			}
		}

		.popup_tips {
			background: #f8f8f8;
			padding: 24rpx 32rpx;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.gray {
				color: #999;
			}

			.tips_icon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.popup_btn_wrap {
			background: #f8f8f8;
			padding: 0 32rpx 64rpx 32rpx;

			.popup_btn {
				background: linear-gradient(to right, #e5d5b2, #d5b488);
				border-radius: 16rpx;
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-shadow: 0 4px 0 0 #aa8666;

				.popup_btn_top {
					font-size: 36rpx;
					font-weight: bold;
				}

				.popup_btn_bottom {
					font-size: 24rpx;
				}
			}
		}
	}
</style>
